<template>
  <div class="home">
    <br/>
    <br/>
    <Form :label-width="80" inline>
      <FormItem label="用户token">
        <Input  v-model="token"/>
      </FormItem>
      <FormItem style="">
        <Button style="margin-left: -80px;" @click="startsocket" type="info">开始连接</Button>
      </FormItem>
    </Form>
    <Row type="flex" justify="center" align="middle">
      <Form inline :label-width="100">
        <FormItem label="广播消息">
          <Input v-model="val"/>
        </FormItem>
        <FormItem>
          <Button style="margin-left: -100px;" @click="sendMsg">发送广播消息</Button>
        </FormItem>
      </Form>
    </Row>
    <Row type="flex" justify="center" align="middle">
      <Form :label-width="100">
        <FormItem style="width: 300px">
          广播消息: {{msdfd}}
        </FormItem>
        <FormItem style="width: 300px" label="用户token">
          <Input v-model="usertoken"/>
        </FormItem>
        <FormItem style="width: 300px" label="消息内容">
          <Input v-model="usermsg"/>
        </FormItem>
        <FormItem style="width: 300px">
          <Button type="success" @click="sendusermsg">用户发送消息</Button>
        </FormItem>
        <FormItem style="width: 300px">
          用户消息: {{userMsg}}
        </FormItem>
      </Form>
    </Row>

  </div>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
        token: null,
        usertoken:null,
        val: null,
        usermsg: null,
      }
    },
    methods: {
      startsocket() {
        this.$store.commit("startwocket", this.token)
        this.$Message.success("ok")
      },
      sendMsg() {
        this.$store.commit("sendMsg", this.val)
      },
      sendusermsg() {
        let data = {
          usertoken:this.usertoken,
          msg:this.usermsg
        }
        this.$store.commit("sendusermsg", JSON.stringify(data))
      }
    },
    mounted() {
    },
    computed: {
      msdfd() {
        return this.$store.state.msgss
      },
      userMsg() {
        return this.$store.state.userMsg
      },
    },
   created() {
    }
  }
</script>
